<template>
  <div>
    <!--左侧插槽-->
    <slot name="left" />
    <el-tooltip class="item" effect="dark" :disabled="!disabledEdit" :content="disabledEditMsg" placement="top-end">
      <span>
        <el-button title="编辑" v-if="!hiddenEdit" v-permission="permission.edit" class="option-item" :loading="crud.status.cu === 2" :disabled="disabledEdit" size="mini" :type="editButtonType" :icon="showEditIcon?'el-icon-edit':''" @click="doEdit(data)">
          <span v-if="showEditText">编辑</span>
        </el-button>
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :disabled="!disabledDle" :content="disabledDleMsg" placement="top-end">
      <el-popover v-model="pop" v-permission="permission.del" class="option-item" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
        <p>{{ msg }}</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="doCancel">取消</el-button>
<!--          <el-button type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>-->
          <el-button :loading="crud.dataStatus[crud.getDataId(data)].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
        </div>
        <el-button  title="删除" v-if="!hiddenDle" slot="reference" :disabled="disabledDle" :type="delButtonType" :icon="showDelIcon?'el-icon-delete':''" size="mini" @click="toDelete"><span v-if="showDelText">删除</span></el-button>
      </el-popover>
    </el-tooltip>
    <!--右侧-->
    <slot name="right" />
  </div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
export default {
  mixins: [crud()],
  props: {
    data: {
      type: Object,
      required: true
    },
    permission: {
      type: Object,
      required: true
    },
    disabledEdit: {
      type: Boolean,
      default: false
    },
    hiddenEdit: {
      type: Boolean,
      default: false
    },
    disabledEditMsg: {
      type: String,
      default: '无法编辑'
    },
    disabledDle: {
      type: Boolean,
      default: false
    },
    hiddenDle: {
      type: Boolean,
      default: false
    },
    disabledDleMsg: {
      type: String,
      default: '无法删除'
    },
    msg: {
      type: String,
      default: '确定删除本条数据吗？'
    },
    async: {
      type: Boolean,
      default: false
    },
    delButtonType: {
      type: String,
      default: 'danger'
    },
    editButtonType: {
      type: String,
      default: 'primary'
    },
    showEditText: {
      type: Boolean,
      default: false
    },
    showDelText: {
      type: Boolean,
      default: false
    },
    showEditIcon: {
      type: Boolean,
      default: true
    },
    showDelIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pop: false
    }
  },
  methods: {
    doCancel() {
      this.pop = false
      this.crud.cancelDelete(this.data)
    },
    toDelete() {
      this.pop = true
    },
    doEdit(data) {
      console.log(data, this.crud, 'data?')
      console.log(this.crud.editParams, 'this.crud.editParams?')
      if (this.crud.editPage) {
        let editAddition = '';
        if (this.crud.editParams.length) {
          for (let i = 0; i < this.crud.editParams.length; i++) {
            const addition = data[this.crud.editParams[i]];
            editAddition = editAddition + '/' + addition
          }
        }
        const editUrl = this.crud.editPageUrl + editAddition;
        this.$router.push(editUrl)
      } else {
        if (this.async) {
          this.crud.crudMethod.get(data[this.crud.idField]).then(res => {
            this.crud.toEdit(res.data)
          })
        } else {
          this.crud.toEdit(data);
        }
      }
    },
    [CRUD.HOOK.afterDelete](crud, data) {
      if (data === this.data) {
        this.pop = false
      }
    },
    onPopoverShow() {
      setTimeout(() => {
        document.addEventListener('click', this.handleDocumentClick)
      }, 0)
    },
    onPopoverHide() {
      document.removeEventListener('click', this.handleDocumentClick)
    },
    handleDocumentClick(event) {
      this.pop = false
    }
  }
}
</script>

<style>
.option-item{
  margin-left: 4px;
}
</style>
